<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>注册页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="__PUBLIC__/css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/app.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/icon.css" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/login.css" />
    <!--<link rel="stylesheet" type="text/css" href="../css/amazeui.min.css" />-->
</head>

<body>
<div class="am-g myapp-login">
    <div class="myapp-login-logo-block">
        <div class="myapp-login-logo">
            <i class="logo"></i>
        </div>
        <div class="myapp-login-logo-text">
            <div class="myapp-login-logo-text">
                <span>百福云仓</span>
            </div>
        </div>
        <div class="mui-content">
            <div  class="mui-control-content mui-active">
                <div class="mui-input-row login-input">
                    <span class="mui-icon mui-login-all phone-icon"></span>
                    <input id="phone" type="text" class="mui-input-password" placeholder="手机号" data-input-password="3">
                </div>
                <div class="mui-input-row login-input pr">
                    <span class="mui-icon mui-login-all yanzhengma-icon"></span>
                    <input id="yzm" type="text" class="mui-input-password" placeholder="验证码" data-input-password="3">
                    <div class="login-line"></div>
                    <span class="hqyzm">获取验证码</span>
                </div>
                <div class="mui-input-row login-input">
                    <span class="mui-icon mui-login-all mima-icon"></span>
                    <input id="password" type="password" class="mui-input-password" placeholder="密码" data-input-password="3">
                </div>
                <div class="mui-input-row login-input">
                    <span class="mui-icon mui-login-all queren-icon"></span>
                    <input id="querenpassword" type="password" class="mui-input-password" placeholder="确认密码" data-input-password="3">
                </div>
                <div class="login-xieyi ">
                    <input id="queren" name="checkbox" value="Item 2" type="checkbox" checked="1">
                    您已经确认<span>《百福云仓库用户注册协议》</span>
                </div>
                <button id="zhuce" type="button" class="mb20 login-btn-sz ">注册并登录</button>
            </div>

        </div>
    </div>
</div>
</div>
</body>
<script src="__PUBLIC__/js/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/layer_mobile/layer.js"></script>
<script>
    $(function(){
        var num = 60;
        var time;
        $(".hqyzm").click(function(){
            clearInterval(time);
            var phone = $('#phone').val()
            if(isMobileNumber(phone) === false)
            {
                return false
            }
            else
            {
                $.post("{:U('fyzm2')}",{phone:phone},function (rel) {
                    layer.open({
                        content: rel.msg
                        ,btn: '我知道了'
                    });
                })
            }
            $(this).html(num);
            time = setInterval(function(){
                num--;
                $(".hqyzm").html(num);
                if(num == 0){
                    num = "重新获取";
                    $(".hqyzm").html(num);
                    clearInterval(time);
                }
            },1000)
        })
    })
</script>
<script>
    $('#zhuce').click(function () {
        var phone   = $('#phone').val()
        var yzm = $('#yzm').val()
        var password = $('#password').val()
        var querenpassword = $('#querenpassword').val()
        if(phone == '' || yzm=='' || password=='' || querenpassword=='')
        {
            layer.open({
                content: '请输入必填项'
                ,btn: '我知道了'
            });
            return false
        }
        if(isMobileNumber(phone) === false)
        {
            return false;
        }
        if(password != querenpassword)
        {
            layer.open({
                content: '密码与确认密码不相同'
                ,btn: '我知道了'
            });
            return false
        }
        //是否选中用户协议
        if( $("input[type='checkbox']").is(':checked') == false)
        {
            layer.open({
                content: '请您确认注册协议'
                ,btn: '我知道了'
            });
            return false
        }
        $.post("{:U('zhuce')}",{phone:phone,yzm:yzm,password:password},function (rel) {
            if(rel.code == '0')
            {
                location.href="/index.php?g=YunCangChu&m=index&a=index"
            }
            else
            {
                layer.open({
                    content: rel.msg
                    ,btn: '我知道了'
                });
                return false
            }
        })
    })
</script>
<script>
    function isMobileNumber(phone) {
        var flag = false;
        var message = "";
        var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
        if (phone == '') {
            // console.log("手机号码不能为空");
            message = "手机号码不能为空！";
        } else if (phone.length != 11) {
            //console.log("请输入11位手机号码！");
            message = "请输入11位手机号码！";
        } else if (!myreg.test(phone)) {
            //console.log("请输入有效的手机号码！");
            message = "请输入有效的手机号码！";
        } else {
            flag = true;
        }
        if (message != "") {
            layer.open({
                content: message
                ,btn: '我知道了'
            });
            return false
        }
        return flag;
    }
</script>
</html>